import React, { forwardRef, useState, useEffect } from 'react'
import './Disinfectionmanagement.scss'
import * as echarts from "echarts";
const Showinfo = forwardRef((props, ref) => {
    const [infodata, setdata] = useState([])
    const getdata = () => {
    }
    const drawbar = () => {
        var myChart = echarts.init(document.getElementById("barli1"));
        var option = option = {
            title: {
                text: "历年驾驶事故男女人数占比",
                left: "left",
                top: "top",
                textStyle: {
                  fontSize: 20,
                  color: "rgba(252, 252, 252, 1)"
                },
                subtextStyle: {
                  fontSize: 20
                }
              },
            grid: {
                top: '15%',
                left: '1%',
                right: '7%',
                bottom: '0%',
                containLabel: true,
            },
            legend: {
                top: '0%',
                right: '10%',
                itemGap: 50,
                data: ['男生', '女生'],
                textStyle: {
                    color: '#f9f9f9',
                    borderColor: '#fff'
                },
            },
            xAxis: [{
                name: '年',
                nameGap: 5,
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#999'
                    },
                },
                axisLabel: {
                    color: '#999',
                },
                axisTick: {
                    show: false,
                },
                data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023',],
            }],
            yAxis: [{
                type: 'value',
                min: 0,
                splitNumber: 7,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#0a3256'
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    color: '#999',
                },
                axisTick: {
                    show: false,
                },
            }],
            tooltip: {
                trigger: 'axis',
            },
            series: [{
                name: '男生',
                type: 'line',
                showAllSymbol: true,
                symbol: 'emptyCircle',
                lineStyle: {
                    color: "#28ffb3",
                    borderColor: '#f0f'
                },
                label: {
                    show: false,
                    position: 'top',
                    color: '#fff',
                },
                itemStyle: {
                    color: "#28ffb3",
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,154,120,1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(0,0,0, 0)'
                    }
                    ], false),
                    shadowColor: 'rgba(53,142,215, 0.9)',
                    shadowBlur: 20
                },
                data: [393, 438, 485, 631, 689, 824, 987]
            }, {
                name: '女生',
                type: 'bar',
                barWidth: 15,
                label: {
                    show: false,
                    position: 'top',
                    color: '#fff',
                },
                itemStyle: {
                    color: "#1cfffb",
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    },
                },
                data: [393, 438, 485, 631, 689, 824, 987]
            }]
        };
        myChart.setOption(option)
        window.onresize = () => {
            myChart.resize();
        }
    }
    const drawbar2 = () => {
        var myChart = echarts.init(document.getElementById("barli2"));
        let legendData = ["酒驾", "清醒"];
        let xAxisData = ["2021", "2022", "2023", "2024", "2025"]
        let seriesData = [100, 112, 323, 235, 115, 241]
        let seriesData1 = [121, 221, 243, 113, 361, 595]
        var option = {
           title: {
            text: "历年驾驶事故人数占比",
            left: "left",
            top: "top",
            textStyle: {
              fontSize: 20,
              color: "rgba(252, 252, 252, 1)"
            },
            subtextStyle: {
              fontSize: 20
            }
          },
           tooltip: {
              trigger: 'axis',
              axisPointer: {
                 type: 'shadow'
              }
           },
           grid: {
              top: '10%',
              left: '2%',
              right: '10%',
              bottom: '5%',
              containLabel: true
           },
           legend: {
              icon: 'rect',
              right: "0%",
              top: '2%',
              itemWidth: 7,
              itemHeight: 7,
              itemGap: 15,
              textStyle: {
                 color: '#89BFE5',
                 fontSize: 12
              }
           },
           xAxis: {
              boundaryGap: true,
              data: xAxisData,
              axisLine: {
                 lineStyle: {
                    color: "rgba(117, 168, 202, 0.4)"
                 }
              },
              axisTick: {
                 show: false
              },
              axisLabel: {
                 color: '#fff'
              }
           },
           yAxis: [{
              name: '单位：人',
              type: "value",
              inverse: false,
              splitLine: {
                 show: true,
                 lineStyle: {
                    color: 'rgba(117, 168, 202, 0.3)',
                    type: 'dashed'
                 }
              },
              axisLine: {
                 show: false,
                 lineStyle: {
                    color: "#0A5C95"
                 }
              },
              axisLabel: {
                 formatter: "{value}",
                 textStyle: {
                    color: '#89BFE5',
                    fontSize: 12
                 }
              },
              nameTextStyle: {
                 color: '#89BFE5',
                 padding: [0, 0, 0, 15],
                 fontSize: 12
              },
              axisTick: {
                 show: false
              }
           }],
           series: [
              {
                 name: legendData[0],
                 type: "line",
                 symbol: 'circle',
                 showAllSymbol: true,
                 symbolSize: 0,
                 smooth: true,
                 itemStyle: {
                    normal: {
                       color: `#00CBFE`,
                       lineStyle: {
                          color: `#00CBFE`,
                          width: 1.5
                       },
                       areaStyle: {
                          color: {
                             type: 'linear',
                             x: 0,
                             y: 0,
                             x2: 0,
                             y2: 1,
                             colorStops: [
                                {
                                   offset: 0,
                                   color: 'rgba(1, 180, 255, 0.2)'
                                },
                                {
                                   offset: 1,
                                   color: 'rgba(1, 180, 255, 0.1)'
                                }
                             ]
                          }
                       },
                    }
                 },
                 data: seriesData
              },
              {
                 name: legendData[1],
                 type: "line",
                 symbol: 'circle',
                 showAllSymbol: true,
                 symbolSize: 0,
                 smooth: true,
                 itemStyle: {
                    normal: {
                       color: `#FFDF04`,
                       lineStyle: {
                          color: `#FFDF04`,
                          width: 1.5
                       },
                       areaStyle: {
                          color: {
                             type: 'linear',
                             x: 0,
                             y: 0,
                             x2: 0,
                             y2: 1,
                             colorStops: [
                                {
                                   offset: 0,
                                   color: 'rgba(255, 223, 4, 0.2)'
                                },
                                {
                                   offset: 1,
                                   color: 'rgba(255, 223, 4, 0.1)'
                                }
                             ]
                          }
                       },
                    }
                 },
                 data: seriesData1
              }
           ]
        };
        myChart.setOption(option)
        window.onresize = () => {
            myChart.resize();
        }
    }
    useEffect(() => {
        drawbar()
        drawbar2()
        console.log(infodata);
        getdata()
    }, [])
    return (
        <div className='showli'>
            <div id='barli1'></div>
            <div id='barli2'></div>
        </div>
    )
})
export default Showinfo